<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./axios.js"></script>
</head>

<body>
  输入查询的城市<input type="text" class="myinput" /> <button>点击我查询</button>
  <div class="exchange">

  </div>
  <div class="wrather">

  </div>
  <script>
    let btn = document.querySelector("button");
    let myinput = document.querySelector(".myinput");
    (async function () {
      // 头部携带token 发送给服务端校验是否正确；
      let { data } = await axios.get("/getlist", {
        headers: {
          Authorization: localStorage.getItem("token")   // 获取localstroage里存储的token
        }
      });
      btn.onclick = function () {
        let val = myinput.value;
        let s = document.createElement("script");
        // s.src = `https://toy1.weather.com.cn/search?cityname=${val}&callback=jsonp_4`;
        s.src = `https://query.asilu.com/weather/baidu?city=${val}&callback=cxc`;
        document.head.appendChild(s);
      }
    })();

    function cxc(res) {
      let exchange = document.querySelector(".exchange");
      let wratherEle = document.querySelector(".wrather")
      exchange.innerHTML = "";
      wratherEle.innerHTML = ""; 
      // console.log(res);
      let { city, update_time, date, weather } = res;
      // console.log(city, update_time, date, weather);
      exchange.innerHTML = `
      <p>城市：${city}</p>
      <p>更新时间：${update_time}</p>
      <p>更新日期：${date}</p>
      `
      let weatherArr = []
      for (let key in weather) {
        // console.log(weather[key]);
        weatherArr.push(weather[key])
      }
      // console.log(weatherArr);
      weatherArr.forEach((item) => {
        wratherEle.innerHTML += `
        date:${item.date}, weather:${item.weather}, icon:${item.icon1}, icon2:${item.icon2}, temp:${item.temp}<br/> 
        `
      })

    }


  </script>
</body>

</html>